<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<h:head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	</h:head>
	
    <h:body>
		 <ui:composition template="/XHTML/CommonColumnsContent.xhtml">
			<ui:define name="header">
				<ui:include src="/WEB-INF/facelets/header.jspx" />
			</ui:define>
        	<br/>
        	<br/> 	
			
			<ui:define name="body">	
			<f:view>
		<h:form>
		
			
			<!-- Crud -->
			<p:dialog width="600" height="600" widgetVar="crud"
				header="Welcome to Zathura with PrimeFaces" showEffect="explode" hideEffect="explode">

				<div align="center">
					<h:panelGrid columns="3">
					 					<h:link outcome="goColegio" value="Colegio" style="color:blue;" />	
										<h:link outcome="goLugar" value="Lugar" style="color:blue;" />	
										</h:panelGrid>
				</div>
			</p:dialog>
			
			<!-- table -->
			<p:dialog width="600" height="600" widgetVar="table"
				header="Welcome to Zathura with PrimeFaces" showEffect="explode" hideEffect="explode">
			
			<div align="center">	
			   <h:panelGrid columns="3">
				  				  <h:link outcome="goColegioListDataTable" value="Colegio-Data" style="color:blue;" />
				  				  <h:link outcome="goLugarListDataTable" value="Lugar-Data" style="color:blue;" />
				  				</h:panelGrid>
				
			</div>	
			</p:dialog>	
			
			<!-- TableEditable -->
			<p:dialog width="600" height="600" widgetVar="tableEditable"
				header="Welcome to Zathura with PrimeFaces" showEffect="explode" hideEffect="explode">
			
			<div align="center">
				<h:panelGrid columns="3">
				  				  <h:link outcome="goColegioListDataTableEditable" value="Colegio-Data-Editable" style="color:blue;" />
				  				  <h:link outcome="goLugarListDataTableEditable" value="Lugar-Data-Editable" style="color:blue;" />
				  				</h:panelGrid>	
			</div>	
			</p:dialog>	
			
			<!-- cambiar las rutas de las imagenes -->
			<p:stack icon="/images/home.png">
				<p:menuitem value="Crud" icon="/images/crud.png"
					onclick="crud.show();" oncomplete="table.hide();tableEditable.hide();" />
				<p:menuitem value="DataTable" icon="/images/dataTable.png"
					onclick="table.show();" oncomplete="crud.hide();tableEditable.hide();" />
				<p:menuitem value="DataTableEditable" icon="/images/dataTableEditable.png" onclick="tableEditable.show();" oncomplete="table.hide();crud.hide();"/>
			</p:stack>

			
		</h:form>
          </f:view>
	    </ui:define>  
		
		<ui:define name="footer">
		 <ui:include src="/WEB-INF/facelets/footerInitialMenu.jspx" />
	   </ui:define>
		
   </ui:composition>	
	</h:body>
									
 </html>

